<template>
    <div class="sys-topBtn">
        <div class="ulNameBox" v-show="showInput">
            <div class="showInputClose">
                <span @click=" showInput = false">x</span>
            </div>
            <Title style="margin-top:50px">
                <slot>
                    <p style="margin-left:20px">
                        {{showInputTitle}}
                    </p>
                </slot>
            </Title>
            <ul> 
                <li>
                    <el-select size="mini" class="input-width" v-model="rowNo" placeholder="请选择">
                        <el-option  v-for="item in roadChoice"   :key="item.value1"  :label="item.label"  :value="item.value1" > </el-option>
                    </el-select>
                <span  class="label-width">巷道：</span>
                </li> 
                <li>
                    <el-select size="mini" class="input-width" v-model="status" placeholder="请选择">
                        <el-option v-for="item in statusChoice" :key="item.value"  :label="item.label" :value="item.value" ></el-option>
                    </el-select>
                <span class="label-width">货位状态：</span>
                </li> 
                <li>
                    <el-select size="mini" class="input-width"  v-model="isEmpty" placeholder="请选择">
                        <el-option v-for="item in isEmptyChoice" :key="item.value"  :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <span class="label-width">是否空箱：</span>
                </li> 
                <li>
                    <el-input  ref="shelvesCode"  class="input-width"  size="mini"  v-model="shelvesCode"  placeholder="请输入内容" ></el-input>
                    <span class="label-width">货位编码：</span>
                </li>
                <li>
                    <el-input
                    ref="palletCode"
                    class="input-width"
                    size="mini"
                    v-model="palletCode"
                    placeholder="请输入内容"
                    ></el-input>
                    <span class="label-width">料箱编码：</span>
                </li>
                <li>
                    <el-input
                    ref="hierarchy"
                    class="input-width"
                    size="mini"
                    v-model="hierarchy"
                    placeholder="请输入内容"
                    ></el-input>
                    <span class="label-width">所属层级：</span>
                </li>
                <li>
                    <el-input
                    ref="col"
                    class="input-width"
                    size="mini"
                    v-model="col"
                    placeholder="请输入内容"
                    ></el-input>
                    <span class="label-width">所属列级：</span>
                </li>
            
            </ul>
            <div style="text-align:center">
                <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
                <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
            </div>
        </div>
        <div class="roadInfoBox" v-show="isRoadOpen">
            <div class="roadClose">
                <span @click="isRoadOpen = false">x</span>
            </div>
            <div style="margin-top:30px">
                <el-select size="mini" v-model="roadNo" placeholder="请选择">
                    <el-option
                        v-for="item in roadChoice"
                        :key="item.value1"
                        :label="item.label"
                        :value="item.value1"
                    >
                    </el-option>
                </el-select>
                <el-button size="mini" type="primary"  @click="roadOpenBtn" style="margin-left:8px">开启巷道</el-button>
                <el-button size="mini" type="primary"  @click="roadCloseBtn">关闭巷道</el-button>
            </div>
        </div>
        <div style="margin:5px 0">
            
            <el-button size="mini" type="primary" @click="changeInfoBtn">修改</el-button>
            <el-button size="mini" type="primary" @click="isRoadOpen = true">巷道开关</el-button>
            <el-button size="mini" type="primary" @click="AllBox" v-loading.fullscreen.lock="fullscreenLoading">一键叫箱</el-button>
        </div>
    </div>
</template>
<script>
import { sysLibraryChange,sysLibraryAdd,sysLibraryDelete,sysRowTurnOn,sysRowTurnDown,sysRowAllBox } from "@/utils/api.js"
import Title from "../../../../../components/TableTitle.vue"
export default {
    name:'SysTopBtn',
    components:{
        Title
    },
    data(){
        return{
            // 操作弹窗
            showInput:false,
            isRoadOpen:false,
            // 弹窗title
            showInputTitle:'',
            msSslShelvesId:'',
            rowNo:'',
            shelvesCode:'',
            hierarchy:'',
            col:'',
            palletCode:'',
            toolCode:'',
            status:'',
            isEmpty:'',
            widths:'',
            heights:'',
            priorityLevelOne:'',
            priorityLevelTwo:'',
            dependShelvesCode:'',
            weight:'',
            remark:'',
            // 输入框禁用 
            isrowNo:false,
            isshelvesCode:false,
            ishierarchy:false,
            iscol:false,
            ispalletCode:false,
            istoolCode:false,
            isstatus:false,
            isisEmpty:false,
            iswidths:false,
            isheights:false,
            ispriorityLevelOne:false,
            ispriorityLevelTwo:false,
            isdependShelvesCode:false,
            isweight:false,
            isremark:false,
            // 区分确认按钮功能--新增or修改
            btnValue:'',
            cheakInfo:[],
            deleteList:[],
            roadNo:'',
            isEmptyChoice:[
                {
                    value: "Y",
                    label: "是",
                },
                {
                    value: "N",
                    label: "否",
                }
            ],
            statusChoice:[
                {
                    value: "1",
                    label: "空闲",
                },
                {
                    value: "2",
                    label: "已分配",
                },
                {
                    value: "3",
                    label: "已占用",
                }
            ],
            roadChoice:[
                {
                    value1: "road1",
                    label: "巷道一",
                },
                {
                    value1: "road2",
                    label: "巷道二",
                },
                {
                    value1: "road3",
                    label: "巷道三",
                },
                {
                    value1: "road4",
                    label: "巷道四",
                },
                {
                    value1: "road5",
                    label: "巷道五",
                },
                {
                    value1: "road6",
                    label: "巷道六",
                }
            ],
            fullscreenLoading: false
        }
    },
    methods:{
        // 新增按钮
        addInfoBtn(){
            this.showInput = true
            this.showInputTitle = '新增编辑'
            this.btnValue = '确认新增'
            // 清空所有input
            this.rowNo = ''
            this.shelvesCode = ''
            this.hierarchy = ''
            this.col = ''
            this.palletCode = ''
            this.toolCode = ''
            this.status = ''
            this.isEmpty = ''
            this.widths = ''
            this.heights = ''
            this.priorityLevelOne = ''
            this.priorityLevelTwo = ''
            this.dependShelvesCode = ''           
            this.weight = ''           
            this.remark = ''
            // 开放所有input
            this.ispalletCode = false
            this.istoolCode = false
            this.isstatus = false         
        },
        // 修改按钮
        changeInfoBtn(){
            console.log(this.cheakInfo.length,this.cheakInfo)
            if(this.cheakInfo.length == 1){
                this.btnValue = '确认修改'
                this.showInputTitle = '修改编辑'
                this.showInput = true
                // this.isrowNo = false
                // this.isshelvesCode = false
                // this.ishierarchy = false
                // this.iscol = false
                // this.ispalletCode = false
                // this.istoolCode = false
                // this.isstatus = false
                // this.isisEmpty = false
                // this.iswidths = false
                // this.isheights = false
                // this.ispriorityLevelOne = false
                // this.ispriorityLevelTwo = false
                // this.isdependShelvesCode = false           
                // this.isweight = false           
                // this.isremark = false 
                this.rowNo = ''
                this.shelvesCode = ''
                // this.hierarchy = ''
                // this.col = ''
                // this.widths = ''
                this.palletCode = ''
                // this.toolCode = ''
                this.status = ''
                this.isEmpty = ''
                // this.heights = ''
                // this.priorityLevelOne = ''
                // this.priorityLevelTwo = ''
                this.rowNo = this.cheakInfo[0].rowNoCode;
                this.shelvesCode = this.cheakInfo[0].shelvesCode;
                this.hierarchy = this.cheakInfo[0].hierarchy;
                this.col = this.cheakInfo[0].col;
                this.widths = this.cheakInfo[0].width;
                this.palletCode = this.cheakInfo[0].palletCode;
                this.toolCode = this.cheakInfo[0].toolCode;
                this.status = this.cheakInfo[0].statusCode;
                this.isEmpty = this.cheakInfo[0].isEmptyCode;
                this.heights = this.cheakInfo[0].height;
                this.priorityLevelOne = this.cheakInfo[0].priorityLevelOne;
                this.priorityLevelTwo = this.cheakInfo[0].priorityLevelTwo;
                this.msSslShelvesId = this.cheakInfo[0].msSslShelvesId;
                this.dependShelvesCode = this.cheakInfo[0].dependShelvesCode;    
                this.weight = this.cheakInfo[0].weight;
                this.remark = this.cheakInfo[0].remark;
            }else {
                this.$Alert({
                    title: "失败",
                    message: '请勾选一条数据进行修改！',
                    type: "error",
                });
            }
        },
        // 新增 修改 确认按钮
        confirmChangeInfoBtn(){
            if(this.btnValue == '确认修改'){
                sysLibraryChange({
                    msSslShelvesId:this.msSslShelvesId,
                    rowNo:this.rowNo,
                    shelvesCode:this.shelvesCode,
                    hierarchy:this.hierarchy,
                    col:this.col,
                    weight:this.widths,
                    palletCode:this.palletCode,
                    toolCode:this.toolCode,
                    status:this.status,
                    isEmpty:this.isEmpty,
                    height:this.heights,
                    priorityLevelOne:this.priorityLevelOne,
                    priorityLevelTwo:this.priorityLevelTwo,
                    dependShelvesCode:this.dependShelvesCode,           
                    weight:this.weight,
                    remark:this.remark
                }).then((res)=>{
                    console.log('修改',res)
                    if(res.data.retCode == 200){
                        this.$Alert({
                            title: "成功",
                            message: res.data.message,
                            type: "success",
                        });
                        // 关闭弹窗
                        this.showInput = false
                        // 
                        this.isrowNo = true
                        this.isshelvesCode = false
                        this.ishierarchy = true
                        this.iscol = true
                        this.ispalletCode = true
                        this.istoolCode = true
                        this.isstatus = true
                        this.isisEmpty = true
                        this.iswidths = true
                        this.isheights = true
                        this.ispriorityLevelOne = true
                        this.ispriorityLevelTwo = true
                        this.isdependShelvesCode = true           
                        this.isweight = true           
                        this.isremark = true 
                        this.rowNo = ''
                        this.shelvesCode = ''
                        this.hierarchy = ''
                        this.col = ''
                        this.palletCode = ''
                        this.toolCode = ''
                        this.status = ''
                        this.isEmpty = ''
                        this.widths = ''
                        this.heights = ''
                        this.priorityLevelOne = ''
                        this.priorityLevelTwo = ''
                        this.dependShelvesCode = ''           
                        this.weight = ''           
                        this.remark = ''
                        // 修改刷新Table并定位页数
                        this.$bus.$emit('sysSlRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }else if(this.btnValue == '确认新增'){
                sysLibraryAdd({
                    // 必要参数
                    rowNo:this.rowNo,
                    shelvesCode:this.shelvesCode,
                    hierarchy:this.hierarchy,
                    col:this.col,
                    // 非必要参数
                    palletCode:this.palletCode,
                    toolCode:this.toolCode,
                    status:this.status,
                    isEmpty:this.isEmpty,
                    width:this.widths,
                    height:this.heights,
                    priorityLevelOne:this.priorityLevelOne,
                    priorityLevelTwo:this.priorityLevelTwo,
                    dependShelvesCode:this.dependShelvesCode,           
                    weight:this.weight,
                    remark:this.remark
                }).then((res)=>{
                    console.log('新增',res)
                    if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 关闭弹窗
                    this.showInput = false
                    // 
                    this.rowNo = ''
                    this.shelvesCode = ''
                    this.hierarchy = ''
                    this.col = ''
                    this.palletCode = ''
                    this.toolCode = ''
                    this.status = ''
                    this.isEmpty = ''
                    this.widths = ''
                    this.heights = ''
                    this.priorityLevelOne = ''
                    this.priorityLevelTwo = ''
                    this.dependShelvesCode = ''           
                    this.weight = ''           
                    this.remark = ''
                    // 修改刷新Table并定位页数
                    this.$bus.$emit('sysSlRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }
        },
        // 删除按钮
        deleteInfoBtn(){
            sysLibraryDelete({
                sslIds:this.deleteList
            }).then((res)=>{
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 刷新Table并定位页数 
                    this.$bus.$emit('sysSlRefreshTable','刷新')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 开启巷道按钮
        roadOpenBtn(){
            sysRowTurnOn({
                roadway:this.roadNo
            }).then((res)=>{
                console.log('开启巷道',res)
                if(res.data.retCode == 200){
                    // 关闭弹窗
                    this.isRoadOpen = false
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 清空下拉框
                    this.rowNo = ''
                    // 刷新Table并定位页数 
                    this.$bus.$emit('sysSlRefreshTable','刷新')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 关闭巷道按钮
        roadCloseBtn(){
             sysRowTurnDown({
                roadway:this.roadNo
            }).then((res)=>{
                console.log('关闭巷道',res)
                if(res.data.retCode == 200){
                    // 关闭弹窗
                    this.isRoadOpen = false
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 清空下拉框
                    this.rowNo = ''
                    // 刷新Table并定位页数 
                    this.$bus.$emit('sysSlRefreshTable','刷新')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        },
        // 一键叫箱
        AllBox(){
            
            if(this.cheakInfo.length == 0){
                this.$Alert({
                        title: "失败",
                        message: "请至少选中一条进行叫箱操作",
                        type: "error",
                    });
                return;
            }
            this.fullscreenLoading = true;
            let allBoxInfo = []
            for(let al=0;al<this.cheakInfo.length;al++){
                let alls = {'roadway':this.cheakInfo[al].rowNo,'startCode':this.cheakInfo[al].shelvesCode,'palletCode':this.cheakInfo[al].palletCode}
                allBoxInfo.push(alls)
            }
            sysRowAllBox({
                codes:allBoxInfo
            }).then((res)=>{
                console.log('一键叫箱',res)
                if(res.data.retCode == 200){
                    this.fullscreenLoading = false;
                    // 刷新Table并定位页数
                    this.$bus.$emit('sysSlRefreshTable','刷新')
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    
                }else {
                    this.fullscreenLoading = false;
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
                setTimeout(() => {
                    loading.close();
                }, 10000);
            })
        }
    },
    mounted(){
      // 将勾选的数据信息给 TopBtn-修改按钮-删除按钮 
      this.$bus.$on('sysSlChange',(e)=>{
        this.cheakInfo = e
        this.deleteList = []
        for(let i=0;i<e.length;i++){
            this.deleteList.push(e[i].msSslShelvesId)
        }
        // console.log(1111,this.cheakInfo)
        
      })
    }
}
</script>
<style scoped>
.sys-topBtn {
    /* position: relative; */
    width: 100%;
    /* overflow: hidden; */
}
.ulNameBox {
    position: relative;
    width: calc(100% - 200px);
    height: calc(100% - 60px);
    position: absolute;
    top: 60px;
    left: 200px;
    z-index: 99;
    background: white;
}
.roadInfoBox {
    position: relative;
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    z-index: 99;
    background: rgb(236, 235, 235);
}
.roadClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.showInputClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.ulNameBox ul {
    margin-top: 5px;
    overflow: hidden;
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.label-width{
    width:120px;
}
.input-width{
    width:120px;
}
</style>